<template>
  <div   >
    <div class="form-warp">
      <span class="form-tips">设备信息<span class="e">*</span></span>
      <el-form :inline="true" :model="carForm" class="form">
        <el-form-item label="车牌号">
          <el-input style="width: 200px" v-model="carForm.plateNumber" placeholder="请输入车牌号"></el-input>
        </el-form-item>
        <el-form-item label="设备编号">
          <el-input v-model="carForm.deviceNumber" placeholder="请输入设备编号"></el-input>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" @click="checkDevice">检测设备</el-button>
        </el-form-item>
      </el-form>
      <div style="justify-content: center;padding: 10px;display: flex">
        <div class="data-item"><span class="title  icon-iconset0480" style="color: #c5042f" title="温度" /><span>{{!this.carForm.temperature01||!this.carForm.temperature02?'--/--':this.carForm.temperature01+'-'+this.carForm.temperature02}}</span></div>
        <div class="data-item"><span class="title icon-electricquantity2dianchidianliang" style="color:#4eb310;" title="电量"></span><span>{{this.carForm.power||'--/--'}}</span></div>
        <div class="data-item"><span class="title icon-xinhao" style="color: #0368d2"  title="信号"></span><span>{{this.carForm.xinghaoqiangdu||'--/--'}}</span></div>
        <div class="data-item"><span class="title icon-daohang" title="定位"></span><span>{{!this.carForm.lon||!this.carForm.lat?'--/--':this.carForm.lon+','+this.carForm.lat}}</span></div>
      </div>
    </div>
    <div class="form-warp">
      <span class="form-tips">基础信息</span>
      <el-form :model="carForm" class="form" :label-position="right"  label-width="80px">
        <div style="display: flex;justify-content: flex-start">
          <el-form-item label="车辆品牌">
            <CarBrandSelect :value.sync="carForm.brandid" :placeholder="请选择品牌"/>
          </el-form-item>
          <el-form-item label="车辆类型">
            <CarTypeSelect :value.sync="carForm.model" :placeholder="请选择车型"/>
          </el-form-item>
        </div>



        <el-form-item label="保险日期" >
          <div style="display: flex;justify-content: flex-start">
            <el-date-picker type="date" placeholder="选择开始日期" v-model="carForm.safeBegin" style="width: 200px;"></el-date-picker>
            <span>-</span>
            <el-date-picker type="date" placeholder="选择结束日期" v-model="carForm.safeEnd" style="width: 200px;"></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="年检日期" >
          <div style="display: flex;justify-content: flex-start">
            <el-date-picker type="date" placeholder="选择开始日期" v-model="carForm.yearInspectionBegin" style="width: 200px;"></el-date-picker>
            <span>-</span>
            <el-date-picker type="date" placeholder="选择结束日期" v-model="carForm.yearInspectionEnd" style="width: 200px;"></el-date-picker>
          </div>
        </el-form-item>
      </el-form>

    </div>
    <div class="form-warp" >
      <span class="form-tips">证件信息</span>
      <div style="display: flex;justify-content: center">
        <div class="flies-item">
          <span class="title">车辆行驶证</span>
          <DragUpload :imageUrl.sync="carForm.passProveImage" />
        </div>
        <div class="flies-item">
          <span>交强险保单</span>
          <DragUpload :imageUrl.sync="carForm.tradePolicy"/>
        </div>
        <div class="flies-item">
          <span>商业险保单</span>
          <DragUpload :imageUrl.sync="carForm.businessPolicyImage"/>
        </div>

      </div>
    </div>

    <div style="width: calc( 100%  );height: 45px;position: fixed;bottom: 5px;background: white; display: flex;justify-content: center;border-top: 1px solid #e6e6e6;padding: 5px;" >
      <el-button type="warning" style="width: 300px" @click="$router.go(-1)">返回</el-button>
      <el-button type="primary" @click="save" style="width: 300px;margin-right: 100px">保存</el-button>
    </div>
  </div>
</template>

<script>
  import {editCar, getCarDeviceInfo} from '@/api/car'
  import CarTypeSelect from '@/components/CarTypeSelect'
  import CarBrandSelect from '@/components/CarBrandSelect'
  import DragUpload from '@/components/DragUpload'
  export default {
    components:{
      CarTypeSelect, CarBrandSelect, DragUpload
    },
    data(){
      return {
        carTypes:[],
        carForm:{},
      }
    },
    computed: {
    },
    methods:{
      checkDevice(){
        getCarDeviceInfo(this.carForm.deviceNumber).then(res=>{
          var form={}
          form.temperature01=res.resultCode[0].temperature01
          form.temperature02=res.resultCode[0].temperature02
          form.lat=res.resultCode[0].weidu
          form.lon=res.resultCode[0].jingdu
          form.xinghaoqiangdu=res.resultCode[0].xinghaoqiangdu
          form.power=res.resultCode[0].power
          this.carForm = Object.assign({}, this.carForm, form)
        })
      },
      save(){
        editCar(this.carForm).then(res => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.$router.go(-1)
        })
      }
    }
  }
</script>

<style scoped>
  .e{
    color: red;
  }
  .form{
    padding: 15px 15px 0px 15px;
  }
  .data-item{
    margin-right: 15px;
  }
  .data-item span{
    color: #2d2f33;
    font-size: 12px;
  }
  .data-item .title{
    color: #001528;
    margin-right: 8px;
    font-size: 16px;
  }
  .form-warp{
    border: 1px solid #e0e0e0;
    margin:10px 30px;
  }
  .form-tips{
    display:-webkit-box;
    background: #e6e6e6;
    padding: 10px 8px;
    color: #c0c4cc;
    font-size: 12px;
  }
  .flies-item{
    margin: 15px;
    display: grid;
    justify-items: center;
  }
  .flies-item .title{
    padding: 5px;
  }
</style>
